<template>
  <div class="about">
      <h3>num:{{data.num}}</h3>
      <h3>double:{{data.double}}</h3>
      <button @click="add">增加</button>
  </div>
</template>
<script>
/*
* 使用setup方法
* 引入reaactiv方法和计算属性computed
* 事件需要加上function
* 最后所有要渲染的数据都要return出来
* */

import {reactive,computed} from 'vue';
export default {
  setup(){
    const data = reactive({
      num:1,
      double:computed(()=>data.num*2)
    })
    function add(){
      data.num++;
    }
    return {data,add}
  }
}
</script>